<template>
    <el-dialog
        custom-class="dialogBorder"
        :visible.sync="show"
        :close-on-click-modal="false"
        width="485px"
        :before-close="handleClose"
    >
        <span slot="title" class="dialogTitle">今日学情</span>
        <div class="rightTopBody">
            <div class="topStateBox">
                <div>
                    <div
                        :class="[
                            ranking_list.question_num_top == 1
                                ? 'topStateNum'
                                : 'topStateNum1'
                        ]"
                    >
                        {{ ranking_list.question_num }}
                        <template v-if="ranking_list.question_num_top == 1">
                            <img
                                class="iconImg"
                                src="@/assets/images/result/up.png"
                            />
                        </template>
                        <template v-else>
                            <img
                                class="iconImg"
                                src="@/assets/images/result/down.png"
                            />
                        </template>
                    </div>
                    <div class="topStateSubText">做题量</div>
                </div>
                <div>
                    <div
                        :class="[
                            ranking_list.accuracy_top == 1
                                ? 'topStateNum'
                                : 'topStateNum1'
                        ]"
                    >
                        {{ ranking_list.accuracy }}%
                        <template v-if="ranking_list.accuracy_top == 1">
                            <img
                                class="iconImg"
                                src="@/assets/images/result/up.png"
                            />
                        </template>
                        <template v-else>
                            <img
                                class="iconImg"
                                src="@/assets/images/result/down.png"
                            />
                        </template>
                    </div>
                    <div class="topStateSubText">正确率</div>
                </div>
                <div>
                    <div
                        :class="[
                            ranking_list.duration_top == 1
                                ? 'topStateNum'
                                : 'topStateNum1'
                        ]"
                    >
                        {{ ranking_list.duration }}h
                        <template v-if="ranking_list.duration_top == 1">
                            <img
                                class="iconImg"
                                src="@/assets/images/result/up.png"
                            />
                        </template>
                        <template v-else>
                            <img
                                class="iconImg"
                                src="@/assets/images/result/down.png"
                            />
                        </template>
                    </div>
                    <div class="topStateSubText">活跃时长</div>
                </div>
            </div>
            <div class="topStateTitle2">昨日学情</div>
            <div class="topStateBox2">
                <div class="topStateBoxItem">
                    <div class="topStateNum2">
                        {{ oldrank_list.question_num }}
                    </div>
                    <div class="topStateSubText">做题量</div>
                </div>
                <div class="topStateBoxItem">
                    <div class="topStateNum2">{{ oldrank_list.accuracy }}%</div>
                    <div class="topStateSubText">正确率</div>
                </div>
                <div class="topStateBoxItem">
                    <div class="topStateNum2">{{ oldrank_list.duration }}h</div>
                    <div class="topStateSubText">活跃时长</div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <div @click="confirm" class="dialogBtn dialogBtn-blue">
                查看详情
            </div>
            <div @click="confirm" class="dialogBtn dialogBtn-green">
                确 定
            </div>
        </span>
    </el-dialog>
</template>

<script>
import { getrecordList } from "@/api/learningSituation/index";
export default {
    data() {
        return {
            show: true,
            ranking_list: {
                // 今日学情列表
                question_num: 0,
                accuracy: 0,
                duration: 0
            },
            oldrank_list: {
                // 昨日学情列表，默认给他们为0
                question_num: 0,
                accuracy: 0,
                duration: 0
            }
        };
    },
    methods: {
        handleClose(done) {
            done();
        },
        confirm() {
            this.$emit("confirm");
        }
    },
    created() {
        // 昨天凌晨时间戳- 现在时间时间戳
        let date = new Date();
        date.setHours(24);
        date.setMinutes(0);
        date.setSeconds(0);
        let start_time = parseInt(date.getTime() / 1000) - 86400 * 2;
        let end_time = parseInt(new Date().getTime() / 1000);
        // 获取昨天-今日学情
        getrecordList({
            start_time: start_time,
            end_time: end_time
        }).then(res => {
            if (res.code === 200) {
                this.ranking_list = res.data[0];
                this.ranking_list.duration = (
                    this.ranking_list.duration / 3600
                ).toFixed(1);
                // 返回的正确率要*100来按照百分比计算,如 0.3 就等于33%
                this.ranking_list.accuracy = parseInt(
                    this.ranking_list.accuracy * 100
                );
                // 大于1 表示有昨日学期
                if (res.data.length > 1) {
                    this.oldrank_list = res.data[1];
                    this.oldrank_list.duration = (
                        this.oldrank_list.duration / 3600
                    ).toFixed(1);
                    this.oldrank_list.accuracy = parseInt(
                        this.oldrank_list.accuracy * 100
                    );
                }
            }
        });
    }
};
</script>

<style lang="scss" scoped>
.rightTopBody {
    padding: 0 24px;
    box-sizing: border-box;
}
.topStateTitle {
    text-align: center;
    font-size: 22px;
    color: #2d3440;
}
.topStateBox {
    display: flex;
    justify-content: space-between;
    text-align: center;
    .topStateNum {
        font-size: 42px;
        font-weight: bold;
        color: #18db60;
        position: relative;
        .iconImg {
            width: 24px;
            height: 24px;
            position: absolute;
            right: -20px;
            bottom: 13px;
        }
    }
    .topStateNum1 {
        font-size: 42px;
        font-weight: bold;
        color: #ffa442;
        position: relative;
        .iconImg {
            width: 24px;
            height: 24px;
            position: absolute;
            right: -20px;
            bottom: 13px;
        }
    }
}

.topStateSubText {
    font-size: 12px;
    font-weight: normal;
    color: #9ea4b0;
}
.topStateTitle2 {
    font-size: 16px;
    font-weight: normal;
    color: #6d7785;
    margin-top: 20px;
}
.topStateBox2 {
    display: flex;
    text-align: center;
    margin-top: 12px;
    .topStateBoxItem {
        margin-right: 20px;
        .topStateNum2 {
            font-size: 32px;
            font-weight: bold;
            color: #dadfe6;
        }
    }
}

.dialogBorder {
    border-radius: 15px;
}
.dialogTitle {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 22px;
}
/* 弹窗按钮 */
.dialogBtn {
    display: inline-block;
    width: 65px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    text-align: center;
    border: 1px #000000 solid;
    margin-left: 5px;
    font-size: 12px;
    cursor: pointer;
}
.dialogBtn-blue {
    color: #3980ed;
    background: #ffffff;
    border-color: #3980ed;
}
.dialogBtn-green {
    background: #18db60;
    color: #ffffff;
    border-color: #15ca57;
}
</style>
